//top区域
let topBtn=document.querySelectorAll('.top .middle a')
topBtn.forEach(function(v,i){
    v.onclick=function(){
        topBtn.forEach(function(v2,i2){
            v2.className=''
        })

        v.className='topOn'
    }
})




//API区域
//1、获取pic盒子
let picArr =document.querySelectorAll('.api .pic');
console.log(picArr);//伪数组
//2、遍历数组
picArr.forEach(function(v,i){
//v=每一个盒子
let imgName;
v.onmouseover=function(){
    //先获取当前pic盒子里的img标签的src属性值
    let imgUrl = v.children[0].src
    console.log('图片地址',imgUrl);
    //图片地址里最后一个 / 的下标
    //不包含 / ,要下标+1
    let start = imgUrl.lastIndexOf('/')+1;
    //图片地址里最后一个 . 的下标
    let end = imgUrl.lastIndexOf('.');
    //字符串截取 str.slice(开始截取的下标,结束的下标)
    imgName= imgUrl.slice(start,end);
   
    //将截取到的图片名称拼接到img的src中
    v.children[0].src=`../images/${imgName}-c.svg`;
    //变更盒子的背景颜色
    v.style.background = 'blue';
}

    //移出
    v.onmouseout = function(){
        v.children[0].src=`../images/${imgName}.svg`;
        v.style.background = '#fff';
    }

})




//回顶部块
let goTop = document.querySelector('.goTop');
goTop.onclick = function(){
    window.scrollTo(0,0)

}




window.onscroll = function(){
    if(window.scrollY>=400){
        goTop.style.display='block';
    }else{
        goTop.style.display='none';
    }
}